<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼图游戏（实时提示版）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }
        body {
            background-color: #f5f5f5;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
        }
        /* 主容器：包含提示框和游戏区域 */
        .main-container {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 20px;
        }
        /* 实时提示框 */
        .hint-box {
            width: 150px;
            padding: 15px;
            background-color: #fff;
            border: 3px solid #3498db;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .hint-title {
            font-size: 16px;
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .correct-count {
            font-size: 24px;
            color: #27ae60;
            font-weight: bold;
        }
        /* 按钮容器 */
        .btn-container {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        /* 原图显示区域（放置区域）- 网格布局 */
        .original-container {
            width: 450px;
            height: 300px;
            border: 3px solid #2c3e50;
            margin-bottom: 20px;
            position: relative;
            background-color: #fff;
            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(5, 1fr);
        }
        /* 正确图片遮罩 */
        .correct-img-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        .correct-img {
            width: 90%;
            height: 90%;
            object-fit: cover;
            border: 2px solid #2c3e50;
        }
        /* 网格单元格 */
        .grid-cell {
            border: 1px dashed #ddd;
            cursor: pointer;
            transition: background-color 0.2s;
            position: relative;
            overflow: hidden;
        }
        .grid-cell:hover {
            background-color: rgba(52, 152, 219, 0.1);
        }
        .grid-cell.selected {
            background-color: rgba(52, 152, 219, 0.2);
            border-color: #3498db;
        }
        /* 打乱的拼图块容器 */
        .pieces-container {
            width: 800px;
            min-height: 150px;
            border: 2px solid #999;
            padding: 10px;
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            background-color: #f9f9f9;
            border-radius: 4px;
            justify-content: center;
        }
        /* 拼图块样式 */
        .puzzle-piece {
            width: calc(450px / 5);
            height: calc(300px / 2);
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid #666;
            background-size: cover;
            background-position: center;
            border-radius: 2px;
        }
        .puzzle-piece:hover {
            border-color: #3498db;
            transform: scale(1.02);
        }
        .puzzle-piece.selected {
            border-color: #2ecc71;
            box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
        }
        /* 结果显示容器 */
        .result-container {
            margin-top: 20px;
            text-align: center;
            display: none;
            padding: 20px 40px;
            border: 2px solid #27ae60;
            border-radius: 6px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .result-title {
            font-size: 24px;
            color: #27ae60;
            margin-bottom: 10px;
        }
        .password-text {
            font-size: 32px;
            color: #e74c3c;
            font-weight: bold;
            letter-spacing: 2px;
        }
        /* 按钮样式 */
        button {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
            border: 2px solid transparent;
        }
        button:hover {
            transform: translateY(-2px);
        }
        button:active {
            transform: translateY(0);
        }
        #startBtn {
            background-color: #3498db;
            border-color: #2980b9;
        }
        #startBtn:hover {
            background-color: #2980b9;
        }
        #checkBtn {
            background-color: #2ecc71;
            border-color: #27ae60;
            display: none;
        }
        #checkBtn:hover {
            background-color: #27ae60;
        }
        #undoBtn {
            background-color: #f39c12;
            border-color: #e67e22;
            display: none;
        }
        #undoBtn:hover {
            background-color: #e67e22;
        }
        #viewImgBtn {
            background-color: #9b59b6;
            border-color: #8e44ad;
            display: none;
        }
        #viewImgBtn:hover {
            background-color: #8e44ad;
        }
        #closeImgBtn {
            margin-top: 10px;
            padding: 5px 15px;
            font-size: 14px;
            background-color: #e74c3c;
            border-color: #c0392b;
        }
        #closeImgBtn:hover {
            background-color: #c0392b;
        }
        /* 遮罩提示 */
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            z-index: 10;
            border: 3px solid #fff;
        }
        /* 提示文本 */
        .hint-text {
            margin-bottom: 15px;
            color: #666;
            font-size: 14px;
            text-align: center;
            line-height: 1.5;
        }
        .view-count-hint {
            color: #9b59b6;
            font-size: 13px;
            margin-top: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>拼图挑战（实时提示版）</h1>
    <div class="hint-text">提示：先点击下方拼图块选择，再点击上方网格位置放置，可撤销上一步操作<br>可点击“观看图片”按钮查看正确拼图（最多两次），首次选择拼图块后自动隐藏</div>
    <div class="btn-container">
        <button id="startBtn">开始游戏</button>
        <button id="viewImgBtn">观看图片</button>
        <button id="undoBtn">撤销上一步</button>
        <button id="checkBtn">检查拼图</button>
    </div>
    <div class="view-count-hint" id="viewCountHint">剩余观看次数：2次</div>
    
    <!-- 主容器：提示框 + 游戏区域 -->
    <div class="main-container">
        <!-- 实时提示框 -->
        <div class="hint-box">
            <div class="hint-title">正确块数</div>
            <div class="correct-count" id="correctCount">0</div>
            <div class="hint-desc">/ 10块</div>
        </div>
        
        <!-- 原图显示区域（网格布局） -->
        <div class="original-container" id="originalContainer">
            <!-- 正确图片遮罩 -->
            <div class="correct-img-mask" id="correctImgMask">
                <img src="" alt="正确拼图" class="correct-img" id="correctImg">
                <button id="closeImgBtn">关闭</button>
            </div>
            <!-- 网格单元格动态生成 -->
        </div>
    </div>
    
    <!-- 打乱的拼图块容器 -->
    <div class="pieces-container" id="piecesContainer"></div>
    
    <!-- 结果显示容器 -->
    <div class="result-container" id="resultContainer">
        <div class="result-title">恭喜完成拼图！</div>
        <div class="password-text">密码：9527</div>
    </div>

    <script>
        // 获取元素
        const startBtn = document.getElementById('startBtn');
        const checkBtn = document.getElementById('checkBtn');
        const undoBtn = document.getElementById('undoBtn');
        const viewImgBtn = document.getElementById('viewImgBtn');
        const originalContainer = document.getElementById('originalContainer');
        const piecesContainer = document.getElementById('piecesContainer');
        const resultContainer = document.getElementById('resultContainer');
        const correctImgMask = document.getElementById('correctImgMask');
        const correctImg = document.getElementById('correctImg');
        const closeImgBtn = document.getElementById('closeImgBtn');
        const viewCountHint = document.getElementById('viewCountHint');
        const correctCount = document.getElementById('correctCount');
        
        // 拼图配置
        const puzzleRow = 2;
        const puzzleCol = 5;
        const totalPieces = puzzleRow * puzzleCol;
        let pieceWidth, pieceHeight;
        let puzzlePieces = [];
        let selectedPiece = null; // 选中的拼图块
        let isCompleted = false;
        let gameImage = null;
        let gridCells = []; // 网格单元格数组
        let operationHistory = []; // 操作历史记录
        let viewImgCount = 2; // 观看图片次数限制
        let hasClickedPiece = false; // 是否首次点击拼图块
        let imageUrl = ''; // 存储图片URL
        
        // 预加载图片
        window.onload = function() {
            // 生成随机图片URL
            const randomSeed = Math.floor(Math.random() * 10000);
            imageUrl = `https://picsum.photos/450/300?random=${randomSeed}`;
            
            gameImage = new Image();
            gameImage.crossOrigin = 'anonymous';
            gameImage.src = imageUrl;
            gameImage.onload = function() {
                correctImg.src = imageUrl; // 设置正确图片
                initGridLayout(); // 初始化网格布局
                updateCorrectCount(); // 初始化正确块数显示
            };
            gameImage.onerror = function() {
                alert("图片加载失败，请刷新页面重试！");
            };
        };
        
        // 初始化网格布局
        function initGridLayout() {
            originalContainer.innerHTML = '';
            // 重新添加正确图片遮罩
            originalContainer.appendChild(correctImgMask);
            gridCells = [];
            for (let row = 0; row < puzzleRow; row++) {
                for (let col = 0; col < puzzleCol; col++) {
                    const cell = document.createElement('div');
                    cell.className = 'grid-cell';
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.addEventListener('click', handleGridCellClick);
                    originalContainer.appendChild(cell);
                    gridCells.push({
                        element: cell,
                        row,
                        col,
                        hasPiece: false,
                        pieceInfo: null
                    });
                }
            }
        }
        
        // 初始化游戏
        startBtn.addEventListener('click', initGame);
        
        function initGame() {
            if (!gameImage || !gameImage.complete) {
                alert("图片加载中，请稍候！");
                return;
            }
            
            // 重置状态
            isCompleted = false;
            selectedPiece = null;
            hasClickedPiece = false;
            viewImgCount = 2; // 重置观看次数
            viewCountHint.textContent = `剩余观看次数：${viewImgCount}次`;
            resultContainer.style.display = 'none';
            piecesContainer.innerHTML = '';
            
            // 显示相关按钮
            checkBtn.style.display = 'inline-block';
            undoBtn.style.display = 'inline-block';
            viewImgBtn.style.display = 'inline-block';
            startBtn.style.display = 'none'; // 隐藏开始按钮
            
            // 显示原图和遮罩提示
            originalContainer.innerHTML = '';
            originalContainer.appendChild(correctImgMask); // 添加遮罩
            const imgElement = document.createElement('img');
            imgElement.src = gameImage.src;
            imgElement.style.width = '100%';
            imgElement.style.height = '100%';
            imgElement.style.objectFit = 'cover';
            originalContainer.appendChild(imgElement);
            
            const mask = document.createElement('div');
            mask.className = 'mask';
            mask.textContent = '3秒后开始拼图...';
            originalContainer.appendChild(mask);
            
            // 3秒后初始化拼图
            setTimeout(() => {
                mask.remove();
                initGridLayout(); // 重建网格
                startPuzzle(); // 生成拼图块
                updateCorrectCount(); // 初始化正确块数显示
            }, 3000);
        }
        
        // 生成拼图块
        function startPuzzle() {
            const originalWidth = originalContainer.offsetWidth;
            const originalHeight = originalContainer.offsetHeight;
            
            pieceWidth = originalWidth / puzzleCol;
            pieceHeight = originalHeight / puzzleRow;
            
            // 清空并重新生成拼图块
            puzzlePieces = [];
            const pieceIndexes = Array.from({length: totalPieces}, (_, i) => i);
            // 打乱顺序
            const shuffledIndexes = pieceIndexes.sort(() => Math.random() - 0.5);
            
            for (let i = 0; i < totalPieces; i++) {
                const index = shuffledIndexes[i];
                const row = Math.floor(index / puzzleCol);
                const col = index % puzzleCol;
                
                const piece = document.createElement('div');
                piece.className = 'puzzle-piece';
                piece.dataset.row = row;
                piece.dataset.col = col;
                piece.dataset.index = index;
                
                // 计算背景位置
                const bgX = -col * pieceWidth;
                const bgY = -row * pieceHeight;
                piece.style.backgroundImage = `url(${imageUrl})`;
                piece.style.backgroundPosition = `${bgX}px ${bgY}px`;
                piece.style.backgroundSize = `${originalWidth}px ${originalHeight}px`;
                
                // 添加点击事件
                piece.addEventListener('click', handlePieceClick);
                
                piecesContainer.appendChild(piece);
                
                puzzlePieces.push({
                    element: piece,
                    row,
                    col,
                    index,
                    placed: false,
                    gridRow: -1,
                    gridCol: -1
                });
            }
        }
        
        // 点击拼图块选择
        function handlePieceClick(e) {
            if (isCompleted) return;
            
            // 标记首次点击拼图块
            if (!hasClickedPiece) {
                hasClickedPiece = true;
                correctImgMask.style.display = 'none'; // 隐藏正确图片
            }
            
            // 取消之前的选择
            if (selectedPiece) {
                selectedPiece.element.classList.remove('selected');
            }
            
            // 选择当前拼图块（未放置的）
            const piece = e.target;
            const pieceInfo = puzzlePieces.find(p => 
                p.row == piece.dataset.row && p.col == piece.dataset.col && !p.placed
            );
            
            if (pieceInfo) {
                selectedPiece = pieceInfo;
                piece.classList.add('selected');
                
                // 高亮网格提示（可选）
                gridCells.forEach(cell => {
                    cell.element.classList.remove('selected');
                });
            } else {
                selectedPiece = null;
            }
        }
        
        // 点击网格单元格放置拼图块
        function handleGridCellClick(e) {
            if (!selectedPiece || isCompleted) return;
            
            const cell = e.target;
            const cellRow = parseInt(cell.dataset.row);
            const cellCol = parseInt(cell.dataset.col);
            
            // 检查单元格是否已放置拼图块
            const cellInfo = gridCells.find(c => c.row === cellRow && c.col === cellCol);
            if (cellInfo && !cellInfo.hasPiece) {
                // 记录操作历史（包含之前的状态）
                const operation = {
                    type: 'place',
                    pieceInfo: {
                        row: selectedPiece.row,
                        col: selectedPiece.col,
                        index: selectedPiece.index
                    },
                    cellInfo: {
                        row: cellRow,
                        col: cellCol
                    },
                    prevCellInfo: cellInfo.pieceInfo // 之前的拼图块（如果有）
                };
                operationHistory.push(operation);
                
                // 创建拼图块元素并添加到单元格
                const pieceElement = document.createElement('div');
                pieceElement.style.width = '100%';
                pieceElement.style.height = '100%';
                pieceElement.style.backgroundImage = selectedPiece.element.style.backgroundImage;
                pieceElement.style.backgroundPosition = selectedPiece.element.style.backgroundPosition;
                pieceElement.style.backgroundSize = selectedPiece.element.style.backgroundSize;
                
                cell.innerHTML = '';
                cell.appendChild(pieceElement);
                
                // 更新状态
                cellInfo.hasPiece = true;
                cellInfo.pieceInfo = selectedPiece;
                
                selectedPiece.placed = true;
                selectedPiece.gridRow = cellRow;
                selectedPiece.gridCol = cellCol;
                selectedPiece.element.style.display = 'none'; // 隐藏原拼图块
                
                // 取消选择
                selectedPiece.element.classList.remove('selected');
                selectedPiece = null;
                
                // 启用撤销按钮（如果有操作历史）
                undoBtn.disabled = operationHistory.length === 0;
                
                // 更新正确块数显示
                updateCorrectCount();
            }
        }
        
        // 撤销上一步操作
        undoBtn.addEventListener('click', undoLastOperation);
        
        function undoLastOperation() {
            if (operationHistory.length === 0 || isCompleted) return;
            
            // 获取最后一次操作
            const lastOp = operationHistory.pop();
            if (lastOp.type === 'place') {
                // 找到对应的拼图块和单元格
                const pieceInfo = puzzlePieces.find(p => 
                    p.row === lastOp.pieceInfo.row && 
                    p.col === lastOp.pieceInfo.col && 
                    p.index === lastOp.pieceInfo.index
                );
                
                const cellInfo = gridCells.find(c => 
                    c.row === lastOp.cellInfo.row && 
                    c.col === lastOp.cellInfo.col
                );
                
                if (pieceInfo && cellInfo) {
                    // 恢复拼图块显示
                    pieceInfo.placed = false;
                    pieceInfo.gridRow = -1;
                    pieceInfo.gridCol = -1;
                    pieceInfo.element.style.display = 'block';
                    
                    // 清空单元格
                    cellInfo.hasPiece = false;
                    cellInfo.pieceInfo = lastOp.prevCellInfo;
                    cellInfo.element.innerHTML = '';
                    
                    // 取消当前选择
                    if (selectedPiece) {
                        selectedPiece.element.classList.remove('selected');
                        selectedPiece = null;
                    }
                    
                    // 更新正确块数显示
                    updateCorrectCount();
                }
            }
            
            // 禁用撤销按钮（如果没有操作历史）
            undoBtn.disabled = operationHistory.length === 0;
        }
        
        // 检查拼图是否正确
        checkBtn.addEventListener('click', checkPuzzle);
        
        function checkPuzzle() {
            if (isCompleted) return;
            
            // 检查是否所有块都已放置
            const allPlaced = puzzlePieces.every(p => p.placed);
            if (!allPlaced) {
                alert('还有拼图块未放置，请继续完成！');
                return;
            }
            
            // 检查每个块的位置是否正确
            let isCorrect = true;
            puzzlePieces.forEach(piece => {
                if (piece.row !== piece.gridRow || piece.col !== piece.gridCol) {
                    isCorrect = false;
                }
            });
            
            if (isCorrect) {
                isCompleted = true;
                resultContainer.style.display = 'block';
                checkBtn.style.display = 'none';
                undoBtn.style.display = 'none';
                viewImgBtn.style.display = 'none'; // 隐藏观看图片按钮
            } else {
                alert('拼图位置不正确，请重新调整！');
            }
        }
        
        // 观看图片按钮点击事件
        viewImgBtn.addEventListener('click', function() {
            if (viewImgCount <= 0 || isCompleted) return;
            
            viewImgCount--;
            viewCountHint.textContent = `剩余观看次数：${viewImgCount}次`;
            
            // 显示正确图片
            correctImgMask.style.display = 'flex';
            
            // 如果次数用完，禁用按钮
            if (viewImgCount <= 0) {
                viewImgBtn.disabled = true;
                viewImgBtn.style.opacity = '0.6';
            }
        });
        
        // 关闭图片按钮点击事件
        closeImgBtn.addEventListener('click', function() {
            correctImgMask.style.display = 'none';
        });
        
        // 点击空白处关闭图片（可选）
        correctImgMask.addEventListener('click', function(e) {
            if (e.target === correctImgMask) {
                correctImgMask.style.display = 'none';
            }
        });
        
        // 更新正确块数显示
        function updateCorrectCount() {
            let count = 0;
            puzzlePieces.forEach(piece => {
                if (piece.placed && piece.row === piece.gridRow && piece.col === piece.gridCol) {
                    count++;
                }
            });
            correctCount.textContent = count;
        }
    </script>
</body>
</html>